<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>详情页</title>
    <style>
        #box-list{
            width: 200px;
            height:320px;
            border: 1px solid #0f0;
            margin: 10px;
            float: left;

        }
        img{
            width: 140px;
            height:140px
        }
        .ipt{
            width:30px;
            height:15px;
        }
    </style>
    <script src="../config/config.js"></script>
    <script src="../lb/axios.min.js"></script>
    <script src="jquery-1.11.3.js"></script>
</head>

<body>
   <div id="box-list">
       <!--  <img src="../img/11.jpg" alt="商品的图片"> 
        <p>商品的详情</p>
        <p>商品的价格</p>
        数量<input type="button" value="-">
        <input class="ipt" type="text" value="1">
        <input  type="button" value="+">
        <br/>
        <a href="cart.html">加入购物车</a> -->
    </div> 
 
    <script>
        let url=new URL(location.href);
        console.log(url) 
        let id=url.searchParams.get("pid")
        console.log(id)
        axios.get(goodDetailApi,{
            params:{
                id
            }
        }).then(res=>{
            console.log(res)
            let p=res.data.data
            console.log(p)
            let html='';
            html+=`
        <img src="${p.pimg}" alt="商品的图片"> 
        <p>${p.pname}</p>
        <p>${p.pprice}</p>
        数量<input class="reduceNum" type="button" value="-">
        <input class="ipt" type="text" value="1">
        <input  type="button"  class="addnum"  value="+">
        <br/>
        <a href="javascript:;" class="add-cart" data-id="${p.pid}">加入购物车</a>
            `
            let _boxList=document.getElementById("box-list")
            _boxList.innerHTML=html;
             /* 加减按钮 */
             $(".addnum").click(function(){
                  $('.ipt').val(function(){
                      return parseInt(this.value)+1
                  })
                })
                $(".reduceNum").click(function(){
                    let _number=document.querySelector(".ipt")
                    if(_number.value==1){
                       return;
                    }else{
                         _number.value=parseInt(_number.value)-1
                    }
                })
                /* 加入购物车 */
                $(".add-cart").click(function(){
                    let pid=this.getAttribute("data-id")//商品id
                    let uid=localStorage.getItem("token")//户
                    console.log(uid)
                    console.log(pid)
                    let pnum=document.querySelector(".ipt").value;
                    console.log(pnum)
                    axios.get(goodAddProuduct,{
                        params:{
                            pid,uid,pnum
                        }
                    }).then(res=>{
                        console.log(res)
                        alert("添加成功")
                        location.href="cart.html"
                    })
                })
        })
    </script>
</body>

</html>